<template>
	<div>
		<div class="c-center-container">
			<h2 class="ui header">{{title.name}}</h2>
			<navi :list="list"
			:currentApi="currentApi	"
			@clickApi="clickApi">
			</navi>
			<div class="c-right-container">
				<!-- 常规部分 -->
				<div>
					<p><span class="c-title">接口地址:</span> {{current.api_url}}</p>
					<p><span class="c-title">请求方式：</span> {{current.method}}</p>
					<p></p>
				</div>
				<formPart
				:request="current.request"
				:response="current.response"
				@clickApi="clickApi"
				@post="post">
					<div>
						<button class="ui button fr"
						@click="post">
						  试一哈😶
						</button>
						<pre v-show="current.response_data">{{current.response_data}}</pre>
					</div>
				</formPart>
			</div>
		</div>
	</div>
</template>
<script>
import navi from './Navi.vue'
import formPart from './Form.vue'
import {myAlert} from '../assets/utils.js'
export default{
	name: 'output',
	mounted(){
		function showFirstApi(){
			document.querySelector('.api').click();
		}
		this.getData(showFirstApi);
	},
	data(){
		return{
			title: {
				name:'',
				editing: false
			},
			list: [],
			current: {
				request: [],
				response: [],
				api_url: '',
				response_data: ''
			},
			currentApi:''
		}
	},
	methods:{
		clickApi(api){
			this.currentApi = api;
			var a = JSON.parse(api.apiContent);
			// this.current = a;
			// 果然要单独赋值阿 不然对象里的值改变是不会被监听的
			this.current.request = a.request;
			this.current.response = a.response;
			this.current.api_url = a.api_url;
			this.current.method = a.method;
			this.current.response_data = '';
		},
		post(){
			let data = {};
			this.current.request.forEach((e) => {
				data[e.name] = e.val;
			})
			this.$http.post(this.current.api_url, data, {
				emulateJSON: true
			}).then((response) => {
				this.current.response_data = response.body;
			},()=>{
				this.current.response_data = '网络请求失败拉！快去质问王景文！☹';
			})
		}
	},
	components: {navi, formPart}
}
</script>
<style lang='less' scoped>
	
</style>